<template>
  <div class="search-panel">
    <!-- show -->
    <div class="top" v-show="showPanel">
      <slot name="search"></slot>
    </div>
    <!-- 控制 -->
    <div class="bottom">
      <div class="left">
        <el-button type="primary" :icon="Refresh" @click="refresh" title="刷新列表"></el-button>
        <slot name="add"></slot>
      </div>
      <div class="right">
        <slot name="edit"></slot>
        <el-button
          type="primary"
          :icon="Search"
          @click="changePanel"
          :title="showPanel?'隐藏更多查询':'显示更多查询'"
          v-if="showSearch"
        ></el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 搜索面板 主要是布局
import { ref } from "vue";
import { Refresh, Search } from "@element-plus/icons-vue";

const props = defineProps({
  showSearch:{
    type:Boolean,
    default:true
  }
})
const showPanel = ref(false);
const emit = defineEmits(["refresh", "changePanel"]);
const refresh = () => {
  emit("refresh");
};
const changePanel = () => {
  emit("changePanel");
  showPanel.value = !showPanel.value;
};
</script>
<style lang="scss" scoped>
.search-panel {
  .top {
    margin-bottom: 10px;
  }
  .bottom {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 5px;
    .left{
      display: flex;
      margin-right: 10px;
    }
    .right{
      display: flex;
    }
  }
}
</style>
